<template>
  <div class="courseList">
    <!-- 课程详情页面不显示banner面包屑导航 -->
    <div class="routesInfo" v-if="watchRoute">
      <div class="container">
        <breadcrumb />
        <div class="title">
          {{ name }}
        </div>
      </div>
    </div>
    <!-- <router-view name="coursesNav"></router-view> -->
    <router-view v-if="$route.name == 'store_browseDetail'"></router-view>
    <div v-else>
      <coursePageNav @change="changePage" :courseCount="getCourseCount" />
      <courseStore v-if="currPageName == 'courseStore'" />
      <openedCourses v-if="currPageName == 'openedCourses' && getTeacherRole" />
      <deleteCourses v-if="currPageName == 'deleteCourses' && getTeacherRole" />

    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/Breadcrumb/index";
import { mapState } from 'vuex';
const coursePageNav = () => import("@/components/coursesPage/coursesNav")
const courseStore = () => import("@/views/coursesStore/list/courseStore")
const openedCourses = () => import("@/views/coursesStore/list/openedCourses")
const deleteCourses = () => import("@/views/coursesStore/list/deleteCourses")
export default {
  components: {
    breadcrumb,
    coursePageNav,
    courseStore,
    openedCourses,
    deleteCourses,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      courses: (state) => state.courses.courses,
      myTeaching: (state) => state.courses.myTeaching,
      deleteCourses: (state) => state.courses.deleteCourses,
    }),
    // 判断当前是否在课程详情页面
    watchRoute() {
      let flag = true;
      this.$route.matched.forEach((item) => {
        if (item.name === "store_browseDetail") {
          flag = false;
        }
      });
      return flag;
    },
    getCourseCount() {
      return {
        courseStore: this.courses?.length || 0,
        openedCourses: this.myTeaching?.length || 0,
        deleteCourses: this.deleteCourses?.length || 0
      }
    },
    getTeacherRole() {
      return this.userInfo?.authNum ? this.userInfo.authNum.indexOf(2) !== -1 : false
    }
  },
  data() {
    return {
      currPageName: "courseStore",
      name: "课程库",
    }
  },
  created() {
    this.$store.dispatch("courses/fetchCourses")
    this.$store.dispatch("courses/fetchCoursesList")
    this.$store.dispatch("courses/fetchCoursesList", { state: "撤销" })
  },
  methods: {
    changePage(item) {
      this.currPageName = item.routePath
      this.name = item.name
    }
  }
};
</script>

<style lang="stylus">
.courseList {
  .routesInfo {
    height: 148px;
    background-color: #003262;

    .container {
      padding-top: 13px;
      margin: 0 auto;
      max-width: 1200px;
      height: 100%;

      .title {
        margin-top: 22px;
        font-family: PMingLiU-ExtB;
        font-size: 32px;
        color: #ffffff;
      }
    }
  }
}
</style>